<script setup>
</script>
<template>
	<view class="">
		<swiper indicator-dots indicator-color="#fff" indicator-active-color="#999" circular autoplay interval="2000"
			vertical>
			<swiper-item>
				<image src="/static/logo.png" mode="aspectFill" class="pic1"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/pic1.webp" mode="aspectFill" class="pic2"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/pic2.jpg" mode="aspectFill" class="pic3"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/pic3.png" mode="aspectFill" class="pic4"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/pic4.gif" mode="aspectFill" class="pic5"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/pic5.jpeg" mode="aspectFill" class="pic6"></image>
			</swiper-item>
			<swiper-item>
				<image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png" mode="aspectFill"
					class="pic7"></image>
			</swiper-item>
		</swiper>
	</view>
	<view>
		<navigator url="/pages/demo2/demo2">跳转到demo2</navigator>
	</view>
</template>
<style lang="scss" scoped>
	swiper {
		width: 100vw; //vw视图宽度，100代表全屏，50半屏，view width
		height: 200px;
		border: 1px solid greenyellow;

		swiper-item {
			width: 100%;
			height: 100%;
			background-color: pink;

			image {
				width: 100%;
				height: 100%;
			}
		}

		swiper-item:nth-child(2n) {
			// 伪类选择器,2是整数步长,n 是从 0 开始的所有非负整数
			background-color: orange;
		}
	}
</style>